<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:100px;height:100px;padding: 10px;border: solid 20px black;margin: 30px;background: red;overflow: auto;}
    </style>
</head>
<body>
    <h2>标题</h2>
    <div class="box">
        这是一个盒子这是一个盒子这是一个盒子这是一个盒子这是一个盒子这是一个盒子这是一个盒子这是一个盒子这是一个盒子这是一个盒子这是一个盒子这是一个盒子这是一个盒子
    </div>
</body>
<script>

    var oBox = document.querySelector(".box")

    console.log( oBox );

    // cont + padding
    console.log( oBox.clientWidth );
    console.log( oBox.clientHeight );

    // cont + padding + border
    console.log( oBox.offsetWidth );
    console.log( oBox.offsetHeight );

    // cont + padding + 可滚动的尺寸
    console.log( oBox.scrollWidth );
    console.log( oBox.scrollHeight );

    // 包含块：距离当前元素最近的一个具有定位的父级，如果不具有这样的父级，那就是根元素
    // 相对于包含块偏移的位置
    console.log( oBox.offsetLeft );
    console.log( oBox.offsetTop );

    document.onclick = function(){
        // 获取滚走了的距离
        // console.log( oBox.scrollLeft );
        // console.log( oBox.scrollTop );

        // 设置滚走了的距离（改变滚动条的位置）
        oBox.scrollTop = 123;
    }



    
    
    
    
    // console.log( getStyle(oBox, "width") );
    // console.log( getStyle(oBox, "paddingLeft") );
    // console.log( getStyle(oBox, "paddingRight") );
    // function getStyle(ele, attr){
    //     if( ele.currentStyle ){
    //         return ele.currentStyle[attr];
    //     }else{
    //         return getComputedStyle(ele)[attr];
    //     }
    // }

</script>
</html>